<template>
  <j-modal
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
    okText="保存"
    cancelText="关闭"
  >
    <template slot="title">
      成本中心<span class="departName">客户名称：{{ model.departName }} </span>
    </template>
    <div class="transfer">
      <a-transfer
        :row-key="(record) => record.id"
        :data-source="costCenterData"
        show-search
        :titles="['待绑定成本中心', '已绑定成本中心']"
        :operations="['选定', '移除']"
        :filter-option="(inputValue, item) => item.name.indexOf(inputValue) !== -1"
        :target-keys="targetKeys"
        :render="(item) => item.name"
        @change="handleChange"
      />
    </div>
  </j-modal>
</template>
  
  <script>
import { getAction,postAction } from '@/api/manage'
export default {
  name: 'SysCostCenterModal',
  data() {
    return {
      width: 800,
      title: '成本中心',
      visible: false,
      disableSubmit: false,
      model: {},
      confirmLoading:false,
      targetKeys: [], //显示在右侧框数据的key的集合
      costCenterData: [], //成本中心数据源
      settlementOrgDTOS:[],    //选中的结算组织
      url: {
        querySettlementOrgByName: '/hzkj-system/sys/costCenter/querySettlementOrgByName',
        queryAllByOrgCode: '/hzkj-system/sys/costCenter/queryAllByOrgCode',
        add:'/hzkj-system/sys/costCenter/add',
      },
    }
  },
  methods: {
    add() {
      this.visible = true
    },
    // edit(record,type) {
    //   this.model = Object.assign({}, record)
    //   // this.targetKeys = targetKeys
    //   //this.visible = true
    //   this.getQueryAllByOrgCode(record,type)
    //   this.getQuerySettlementOrgByName()
    // },
    edit(record,targetKeys) {
      this.model = Object.assign({}, record)
      this.targetKeys = targetKeys
      this.visible = true
      this.getQuerySettlementOrgByName()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    //选项在两栏之间转移时的回调函数
    handleChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },

    //保存
    handleOk() {
       const that = this 
      if(that.targetKeys && that.targetKeys.length <1){
        that.$confirm({
            title:'该客户无成本中心？',
            content:h=><div><div style="color:#F04134;">无成本中心客户鸿展账号将被冻结</div><div style="color:#8A8585a5;">你还要继续吗？</div></div>,
            okText:'继续',
            onOk() {
              that.settlementOrgDTOS =[]
              that.submitHandle() 
            }, 
         })
      }else{
        that.submitHandle() 
      }  
    },
    submitHandle(){
        this.confirmLoading = true
        this.settlementOrgDTOS = this.targetKeys.map(item=>{
        return {
           id:item,
           name:this.costCenterData.find(s=>s.id === item)?.name || ''
         }
       }) || []
        postAction(this.url.add,{orgCode:this.model.orgCode,settlementOrgDTOS:this.settlementOrgDTOS})
         .then(res=>{
            if(res.success){
              this.$message.success(res.message)
              this.visible = false
              this.$emit('ok')
            }else{
              this.$message.warning(res.message)
            }
         })
         .finally(()=>{
            this.confirmLoading = false
         })   
    },
    // //获取已绑定的成本中心
    getQueryAllByOrgCode(record,type){
      const that = this
      getAction(that.url.queryAllByOrgCode, { orgCode:record.orgCode }).then((res) => {
        if (res.success) {
          that.targetKeys = res.result.map(item=>item.settlementOrgId) || []
          if(type === 'enabled' && that.targetKeys.length < 1 && record.status === '0'){
            that.$confirm({
            title:'该客户无成本中心',
            content:h=><div><div style="color:#F04134;">无成本中心客户鸿展账号无法启用</div><div style="color:#8A8585a5;">请配置成本中心</div></div>,
            okText:'去配置',
            onOk() {
              that.visible = true
            }, 
           })
          }else{
            that.visible = true
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    
    //获取兰谷系统结算组织名称
    getQuerySettlementOrgByName() {
      getAction(this.url.querySettlementOrgByName,{orgCode:this.model.orgCode}).then((res) => {
        if (res.success) {
          this.costCenterData = res.result || []
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
  <style lang="less" scoped>
.departName {
  font-size: 14px;
  color: #333;
  margin-left: 30px;
}
/deep/.ant-transfer-list {
  width: 300px;
  height: 600px;
  padding-top: 40px !important;
  .ant-transfer-list-header {
    padding: 5px 12px 5px;
  }
  .ant-transfer-list-header-title {
    color: #c3c3c3;
  }
  .ant-transfer-list-body-with-search {
    padding-top: 40px;
  }
  .ant-transfer-list-body-search-wrapper {
    padding: 0 12px !important;
  }
  .ant-transfer-list-search-action {
    line-height: 0;
  }
}
.transfer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>